<template>
  <div class="my-gain-page">
    <div class="my-gain-container">
      <div class="remain-income">
        <image
          class="money-icon"
          src="https://ustatic.hudongmiao.com/%20miao/money.png"
        />
        <span class="money-num">{{ Number(userInfo.my_gain).toFixed(2) }}</span>
      </div>
      <div class="unit-name">
        余额（元）
      </div>
      <div class="total-income">
        累计奖励：¥{{ Number(userInfo.totalIncome).toFixed(2) }}
      </div>
      <div
        class="take-out-btn"
        @click="turnToTakeOut"
      >
        提现
      </div>
    </div>
    <div class="detail-tab-container">
      <div
        v-for="(tab, index) in tabItems"
        :key="tab.txt"
        class="tab-item"
        :class="{ active: currentTabIndex === index }"
        @click="changeTab(index)"
      >
        {{ tab.txt }}
      </div>
    </div>
    <div class="detail-container">
      <swiper
        class="swiper"
        :current="currentTabIndex"
        duration="200"
        :style="{ height: swiperHeight }"
        @change="slideChangeTab"
      >
        <swiper-item class="income-detail detail">
          <div
            v-if="!incomeDetails.length"
            class="none-detail"
          >
            您暂未获得奖励，上传现场视频，瓜分万元奖励
          </div>
          <div
            v-else
            class="detail-content"
          >
            <div
              v-for="detail in incomeDetails"
              :key="detail.id"
              class="detail-item"
            >
              <div class="item-info">
                <div class="item-title">
                  {{ detail.title }}
                </div>
                <div class="item-create-time">
                  {{ detail.createTime }}
                </div>
              </div>
              <div
                class="account-num"
                :class="{ take: detail.type === 'take' }"
              >
                {{ detail.type === 'add' ? '+' : '-'
                }}{{ Number(detail.account).toFixed(2) }}
              </div>
            </div>
          </div>
        </swiper-item>
        <swiper-item class="take-detail detail">
          <div
            v-if="!takeDetails.length"
            class="none-detail"
          >
            您暂无提现记录，上传现场视频，瓜分万元奖励
          </div>
          <div
            v-else
            class="detail-content"
          >
            <div
              v-for="detail in takeDetails"
              :key="detail.id"
              class="detail-item"
            >
              <div class="item-info">
                <div class="item-title">
                  {{ detail.title }}
                </div>
                <div class="item-create-time">
                  {{ detail.createTime }}
                </div>
              </div>
              <div
                class="account-num"
                :class="{ take: detail.type === 'take' }"
              >
                {{ detail.type === 'add' ? '+' : '-'
                }}{{ Number(detail.account).toFixed(2) }}
              </div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { moneyDetailList } from '@/api/sjsp/video';
import { useUser } from '@/stores/user';

const userStore = useUser();
const { userInfo } = storeToRefs(userStore);

// #region 明细类型切换按钮
const currentTabIndex = ref(0);
const swiperHeight = ref('200px');
const tabItems = reactive<DetailTabItem[]>([
  {
    txt: '奖励明细',
    type: '1',
  },
  {
    txt: '提现记录',
    type: '2',
  },
]);
onBeforeMount(() => {
  swiperHeight.value = Number(((69 * incomeDetails.length) / 0.52).toFixed(0)) >= 200
    ? `${((69 * incomeDetails.length) / 0.52).toFixed(0)}rpx`
    : '200px';
});
onLoad(() => {
  currentTabIndex.value = 0;
  getDetailList('1');
  getDetailList('2');
});
onShow(() => {
  const isUpdate = uni.getStorageSync('updateRecord');
  if (isUpdate) {
    console.log('更新提现记录');
    getDetailList('2');
    uni.removeStorageSync('updateRecord');
  }
});
const changeTab = (index: number) => {
  currentTabIndex.value = index;
  if (index === 0) {
    swiperHeight.value = Number(((69 * incomeDetails.length) / 0.52).toFixed(0)) >= 200
      ? `${((69 * incomeDetails.length) / 0.52).toFixed(0)}rpx`
      : '200px';
  } else if (index === 1) {
    swiperHeight.value = Number(((69 * takeDetails.length) / 0.52).toFixed(0)) >= 200
      ? `${((69 * takeDetails.length) / 0.52).toFixed(0)}rpx`
      : '200px';
  } else {
    swiperHeight.value = '200px';
  }
};
const slideChangeTab = (e: any) => {
  currentTabIndex.value = e.detail.current;
  if (Number(e.detail.current) === 0) {
    swiperHeight.value = Number(((69 * incomeDetails.length) / 0.52).toFixed(0)) >= 200
      ? `${((69 * incomeDetails.length) / 0.52).toFixed(0)}rpx`
      : '200px';
  } else if (Number(e.detail.current) === 1) {
    swiperHeight.value = Number(((69 * takeDetails.length) / 0.52).toFixed(0)) >= 200
      ? `${((69 * takeDetails.length) / 0.52).toFixed(0)}rpx`
      : '200px';
  } else {
    swiperHeight.value = '200px';
  }
};
// #endregion

// #region 明细
// 奖励明细
const incomeDetails = reactive<IncomeDetailItem[]>([]);
const takeDetails = reactive<IncomeDetailItem[]>([]);
/** 获取明细数据 */
const getDetailList = async (type: string) => {
  const res: any = await moneyDetailList(type);
  const target = res?.data?.data;
  let typeTxt = 'add';
  if (Number(type) === 1) {
    incomeDetails.splice(0);
    typeTxt = 'add';
  } else {
    takeDetails.splice(0);
    typeTxt = 'take';
  }
  if (target && target.length) {
    target.map((record: any) => {
      const { title, money, create_time } = record;
      if (Number(type) === 1) {
        incomeDetails.push({
          id: String(Math.random()),
          title,
          account: money,
          createTime: create_time,
          type: typeTxt,
        });
      } else {
        takeDetails.push({
          id: String(Math.random()),
          title,
          account: money,
          createTime: create_time,
          type: typeTxt,
        });
      }
    });
  }
  changeTab(0);
};
// #endregion

/** 跳转到提现页面 */
const turnToTakeOut = () => {
  uni.navigateTo({ url: '/subpkg/take-out/take-out' });
};
</script>

<style lang="scss" scoped>
.my-gain-page {
  width: 100%;
  height: 100%;
  min-height: 100vh;

  background-color: #fff;

  padding: 30.77rpx;
  box-sizing: border-box;

  .my-gain-container {
    margin-bottom: 23.08rpx;

    position: relative;

    width: 100%;

    background-color: #6e7dfe;
    border-radius: 30.77rpx;

    padding: 44.23rpx 0 25rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;

    .remain-income {
      margin-bottom: 11.54rpx;

      display: flex;
      align-items: center;
      justify-content: center;

      .money-icon {
        margin-right: 15.38rpx;

        width: 76.92rpx;
        height: 76.92rpx;

        vertical-align: middle;
      }

      .money-num {
        font-size: 69.23rpx;
        font-weight: bold;
      }
    }

    .unit-name {
      margin-bottom: 19.23rpx;

      font-size: 38.46rpx;
    }

    .total-income {
      font-size: 25rpx;
    }

    .take-out-btn {
      position: absolute;
      top: 50%;
      right: 38rpx;

      background-color: rgb(255 255 255 / 40%);
      border-radius: 28px;

      transform: translateY(-50%);

      padding: 10rpx 29rpx;
      box-sizing: border-box;

      font-size: 23rpx;
    }
  }

  .tip {
    margin-bottom: 38.46rpx;

    width: 100%;

    font-size: 28.85rpx;
    color: #ff2459;
    text-align: center;
  }

  .detail-tab-container {
    margin-bottom: 46rpx;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    .tab-item {
      margin-right: 30.77rpx;

      font-size: 28.85rpx;
      color: rgb(0 0 0 / 40%);

      &:last-of-type {
        margin-right: 0;
      }
    }

    .active {
      position: relative;

      font-size: 32.69rpx;
      color: #333;

      &::after {
        position: absolute;
        bottom: -15rpx;
        left: 50%;

        width: 76.92rpx;
        height: 7.69rpx;

        content: '';

        background-color: #ff2459;
        border-radius: 7.69rpx;

        transform: translateX(-50%);
      }
    }
  }

  .detail-container {
    width: 100%;

    .swiper {
      width: 100%;

      .detail {
        width: 100%;
        height: 100%;

        .none-detail {
          margin-top: 96rpx;

          width: 100%;

          font-size: 29rpx;
          color: rgb(0 0 0 / 40%);
          text-align: center;
        }

        .detail-content {
          width: 100%;

          .detail-item {
            width: 100%;

            border-bottom: 2rpx solid rgb(206 206 206 / 40%);

            padding: 23rpx 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item-info {
              height: 100%;
              flex: 1;

              .item-title {
                margin-bottom: 12rpx;

                font-size: 29rpx;
                color: #333;
              }

              .item-create-time {
                font-size: 25rpx;
                color: rgb(0 0 0 / 40%);
              }
            }

            .account-num {
              height: 100%;

              font-size: 38rpx;
              color: #27ae60;
            }

            .take {
              color: #eb5757;
            }
          }
        }
      }
    }
  }
}
</style>
